<template>
  <el-dialog
    class="dialogStyle"
    style="width: 90vw"
    :title="'组合开关'"
    v-model="visible"
  >
    <div class="container">
      <div class="panel-container">
        <div class="panel">
          <div class="panel-header">
            <h2>组合开关</h2>
            <span class="voltage"
              >设备电压
              {{
                computedResults("ZHVolt_AI", operator.NO, null, 2).value
              }}
              V</span
            >
          </div>
          <div class="table-container">
            <el-row class="header-row">
              <el-col :span="3">设备名称</el-col>
              <el-col :span="2">回路</el-col>
              <el-col :span="1">运行状态</el-col>
              <el-col :span="2">运行电流A</el-col>
              <el-col :span="2">运行电流B</el-col>
              <el-col :span="2">运行电流C</el-col>
              <el-col :span="1">整定电流</el-col>
              <el-col :span="1">短路倍数</el-col>
              <el-col :span="2">启动器回路故障指示</el-col>
              <el-col :span="2">启动器过载故障</el-col>
              <el-col :span="2">启动器缺相故障</el-col>
              <el-col :span="2">启动器漏电闭锁故障</el-col>
              <el-col :span="2">启动器短路故障</el-col>
            </el-row>
            <el-row>
              <el-col :span="3">一号电机冷却风机</el-col>
              <el-col :span="2">第一回路</el-col>
              <el-col :span="1">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH1A[2]', operator.NO).value
                      ? 'green'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2"
                >{{
                  computedResults("ZH1CurrA_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="2"
                >{{
                  computedResults("ZH1CurrB_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="2"
                >{{
                  computedResults("ZH1CurrC_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="1">{{
                computedResults("ZH1RatedCurr_AI", operator.NO, null, 2).value
              }}</el-col>
              <el-col :span="1">{{
                computedResults("ZH1ShortRatio_AI", operator.NO, null, 2).value
              }}</el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH1LoopFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH1OvldFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH1PhaseLossFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH1EarthLeakFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH1ShortFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">一号电机冷却水泵</el-col>
              <el-col :span="2">第二回路</el-col>
              <el-col :span="1">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH2A[2]', operator.NO).value
                      ? 'green'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2"
                >{{
                  computedResults("ZH2CurrA_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="2"
                >{{
                  computedResults("ZH2CurrB_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="2"
                >{{
                  computedResults("ZH2CurrC_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="1">{{
                computedResults("ZH2RatedCurr_AI", operator.NO, null, 2).value
              }}</el-col>
              <el-col :span="1">{{
                computedResults("ZH2ShortRatio_AI", operator.NO, null, 2).value
              }}</el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH2LoopFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH2OvldFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH2PhaseLossFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH2EarthLeakFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH2ShortFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">二号电机冷却风机</el-col>
              <el-col :span="2">第三回路</el-col>
              <el-col :span="1">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH3A[2]', operator.NO).value
                      ? 'green'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2"
                >{{
                  computedResults("ZH3CurrA_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="2"
                >{{
                  computedResults("ZH3CurrB_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="2"
                >{{
                  computedResults("ZH3CurrC_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="1">{{
                computedResults("ZH3RatedCurr_AI", operator.NO, null, 2).value
              }}</el-col>
              <el-col :span="1">{{
                computedResults("ZH3ShortRatio_AI", operator.NO, null, 2).value
              }}</el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH3LoopFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH3OvldFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH3PhaseLossFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH3EarthLeakFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH3ShortFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">二号电机冷却水泵</el-col>
              <el-col :span="2">第四回路</el-col>
              <el-col :span="1">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH4A[2]', operator.NO).value
                      ? 'green'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2"
                >{{
                  computedResults("ZH4CurrA_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="2"
                >{{
                  computedResults("ZH4CurrB_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="2"
                >{{
                  computedResults("ZH4CurrC_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="1">{{
                computedResults("ZH4RatedCurr_AI", operator.NO, null, 2).value
              }}</el-col>
              <el-col :span="1">{{
                computedResults("ZH4ShortRatio_AI", operator.NO, null, 2).value
              }}</el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH4LoopFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH4OvldFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH4PhaseLossFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH4EarthLeakFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH4ShortFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">备用</el-col>
              <el-col :span="2">第五回路</el-col>
              <el-col :span="1">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH5A[2]', operator.NO).value
                      ? 'green'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2"
                >{{
                  computedResults("ZH5CurrA_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="2"
                >{{
                  computedResults("ZH5CurrB_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="2"
                >{{
                  computedResults("ZH5CurrC_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="1">{{
                computedResults("ZH5RatedCurr_AI", operator.NO, null, 2).value
              }}</el-col>
              <el-col :span="1">{{
                computedResults("ZH5ShortRatio_AI", operator.NO, null, 2).value
              }}</el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH5LoopFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH5OvldFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH5PhaseLossFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH5EarthLeakFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH5ShortFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">备用</el-col>
              <el-col :span="2">第六回路</el-col>
              <el-col :span="1">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH6A[2]', operator.NO).value
                      ? 'green'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2"
                >{{
                  computedResults("ZH6CurrA_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="2"
                >{{
                  computedResults("ZH6CurrB_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="2"
                >{{
                  computedResults("ZH6CurrC_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="1">{{
                computedResults("ZH6RatedCurr_AI", operator.NO, null, 2).value
              }}</el-col>
              <el-col :span="1">{{
                computedResults("ZH6ShortRatio_AI", operator.NO, null, 2).value
              }}</el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH6LoopFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH6OvldFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH6PhaseLossFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH6EarthLeakFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH6ShortFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">备用</el-col>
              <el-col :span="2">第七回路</el-col>
              <el-col :span="1">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH7A[2]', operator.NO).value
                      ? 'green'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2"
                >{{
                  computedResults("ZH7CurrA_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="2"
                >{{
                  computedResults("ZH7CurrB_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="2"
                >{{
                  computedResults("ZH7CurrC_AI", operator.NO, null, 2).value
                }}
                A</el-col
              >
              <el-col :span="1">{{
                computedResults("ZH7RatedCurr_AI", operator.NO, null, 2).value
              }}</el-col>
              <el-col :span="1">{{
                computedResults("ZH7ShortRatio_AI", operator.NO, null, 2).value
              }}</el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH7LoopFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH7OvldFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH7PhaseLossFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH7EarthLeakFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
              <el-col :span="2">
                <div
                  class="indicator-light"
                  :class="
                    computedResults('ZH7ShortFault_AI', operator.NO).value
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { act } from "@/utils/websocket";
import { operator } from "@/utils/op_enums";
import { useTagResults } from "@/utils/useTagResults";

const computedResults = (
  key: string,
  op: operator,
  op_number?: number,
  retain?: number
) =>
  computed(() => {
    return useTagResults(act.PD_104_105.PD_104[key], op, op_number, retain);
  });

// 定义变量内容
const visible = ref(false);

// 打开弹窗
const openDialog = () => {
  visible.value = true;
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>

<style scoped lang="scss">
.dialogStyle {
  .container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .panel-container {
    display: flex;
    gap: 15px;
    width: 100%;
  }

  .panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--el-bg-color);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--el-color-primary-light-9);
    border-bottom: 1px solid var(--el-border-color-light);

    h2 {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
      color: var(--el-text-color-primary);
    }

    .voltage {
      font-size: 14px;
      color: var(--el-text-color-regular);
    }
  }

  .table-container {
    overflow-x: auto;
    border: 1px solid var(--el-border-color-light);
  }

  .header-row {
    .el-col {
      background-color: var(--el-fill-color) !important;
      font-weight: 500;
      color: var(--el-text-color-primary);
      padding: 8px 5px;
      text-align: center;
      font-size: 13px;
    }
  }

  .el-row {
    .el-col {
      border: 1px solid var(--el-border-color-lighter);
      padding: 6px 5px;
      text-align: center;
      font-size: 12px;
      color: var(--el-text-color-regular);
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:first-child {
        font-weight: 500;
        color: var(--el-text-color-primary);
        background-color: var(--el-fill-color-lighter);
      }
    }
  }

  .indicator-light {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: 0 auto;
    border: 1px solid var(--el-border-color);

    @extend %status-colors;
  }

  // 定义基础颜色类（只定义一次）
  %status-colors {
    &.green {
      background-color: var(--el-color-success);
    }
    &.red {
      background-color: var(--el-color-danger);
    }
    &.yellow {
      background-color: var(--el-color-warning);
    }
    &.grey {
      background-color: var(--el-border-color-dark); // 比默认边框色更深的灰色
    }
  }
}
</style>
